<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>遍历 dom数</title>
</head>

<body>
   <span>Hello World !</span>
   <ul id="nav">
      <li>电影</li>
      <li>综艺
         <ul>
            <li>跑男</li>
            <li>爸爸去哪</li>
            <li>极限/li>
         </ul>
      </li>
      <li>剧集</li>
   </ul>
   <script>
      //遍历父节点下所有后代节点 

      function getChildren(parent) {
         console.log(parent.nodeName);
         //遍历父节点下的直接子节点
         var childNodes = parent.childNodes;
         for (var child of childNodes) {
            console.log(child.nodeName);
            //#text 标签之间的空格,换行
            getChildren(child);
         }
      }
      getChildren(document.body);

      //按id查找nav的ul
      console.log("按id查找:getElementById(nav)");
      var ul = document.getElementById("nav");
      console.log(ul);
      console.log("查找nav的ul下的li");
      var lis = ul.getElementsByTagName("li");
      console.log(lis);
   </script>
</body>

</html>